import globalAPI from '@/api/globalAPI'
import { request } from '@/api/service'

export const crudOptions = (vm) => {
  return {
    pageOptions: {
      compact: true
    },
    options: {
      height: '100%'
    },
    formOptions: {
      labelWidth: '200px',
      defaultSpan: 24, // 默认的表单 span
      draggable: true // 是否支持表单对话框拖拽
    },
    rowHandle: {
      custom: [ // 自定义按钮
        {
          text: '查看',
          icon: 'el-icon-view',
          size: 'small',
          order: 1, // 数字越小越排前面
          // 配置同上
          // 点击事件,需要在<d2-crud-x @custom-emit="yourHandle"/>
          emit: 'custom-emit'
        }
      ],
      edit: {
        show: false
      },
      remove: {
        show: false
      },
      view: {
        show: false
      }
    },
    searchOptions: {
      // debounce: false, //关闭防抖
      valueChange: true // 搜索框开启valueChange
    },
    format: {
      response (ret) {
        return ret.data
      }
    },
    columns: [
      {
        title: 'ID',
        key: 'id',
        sortable: true,
        width: 90,
        form: {
          disabled: true,
          component: {
            span: 14
          }
        }
      },
      {
        title: '品牌',
        key: 'brandId',
        sortable: true,
        search: {
          disabled: false,
          component: {
            props: {
              filterable: true
            }
          }
        },
        type: 'select',
        width: 90,
        dict: {
          url: `${globalAPI.BASE_URL}/stb/brands/v1`,
          value: 'id', // value的属性名
          label: 'name', // label的属性名
          children: 'data',
          getData: (url, dict, { form, component }) => {
            return request({
              url: url,
              method: 'get'
            }).then(ret => { return ret.data })
          }
        },
        form: {
          /**
           *  valueChange 功能大大增强
           * @param key
           * @param value 当前选择的值
           * @param form 当前表单
           * @param getColumn 获取字段配置的方法，getColumn(keyName) 返回keyName的字段配置，可以动态修改组件配置
           * @param mode 当前模式:【add、edit、search】
           * @param component 当前组件的ref
           * @param immediate 是否是对话框打开后立即触发的
           * @param getComponent 获取组件Ref的方法， getComponent(keyName), 返回组件ref，可以动态调用该组件的方法
           */
          valueChange (key, value, form, { getColumn, mode, component, immediate, getComponent }) {
            form.modelId = undefined // 将“modelId”的值置空
            if (value) {
              getComponent('modelId').reloadDict() // 执行modelId的select组件的reloadDict()方法，触发“modelId”重新加载字典
            }
          },
          valueChangeImmediate: false, // 是否在编辑框打开后立即触发一次valueChange方法
          rules: [ // 表单校验规则
            { required: true, message: '请选择品牌', trigger: 'blur' }
          ],
          component: {
            span: 14
          }
        }
      },
      {
        title: '类型',
        key: 'modelId',
        width: 90,
        sortable: true,
        search: {
          disabled: false,
          component: {
            props: {
              filterable: true
            }
          }
        },
        type: 'select',
        dict: {
          // url() 改成构建url，返回一个url
          url (dict, { form /* 当前的form表单 */, component /* 当前的组件ref */ }) {
            if (form && form.brandId != null) { // 本数据字典的url是通过前一个select的选项决定的
              return `${globalAPI.BASE_URL}/stb/models/${form.brandId}/v1`
            }
            return undefined // 返回undefined 将不加载字典
          },
          getData: (url, dict, { form, component }) => {
            if (url !== undefined) {
              return request({
                url: url,
                method: 'get'
              }).then(ret => { return ret.data })
            }
            return (new Promise(function (resolve, reject) {
              // ... some code
              resolve(1)
            })).then(ret => { return [] })
          },
          children: 'data',
          value: 'id', // value的属性名
          label: 'model' // label的属性名
        },
        form: {
          component: {
            props: { dict: { cache: false } },
            span: 14
          },
          rules: [ // 表单校验规则
            { required: true, message: '请选择类型', trigger: 'blur' }
          ]
        }
      },
      {
        title: '类型',
        key: 'stbType',
        width: 90,
        sortable: true,
        form: {
          rules: [ // 表单校验规则
            { required: true, message: '请输入类型名字', trigger: 'blur' },
            { type: 'string', required: true, pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,200}$/, message: '由2到200个汉字数字字母下划线组成', trigger: 'blur' }
          ],
          component: {
            span: 14
          }
        }
      },
      {
        title: '价格（单位：元）',
        key: 'price',
        width: 90,
        sortable: true,
        form: {
          rules: [ // 表单校验规则
            { required: true, message: '请输入价格', trigger: 'blur' },
            {
              validator (rule, value, callback) {
                var pattern = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
                if (pattern.test(value.toString())) {
                  callback()
                } else {
                  callback(new Error('请输入正确的价格，保留分'))
                }
              },
              trigger: 'blur'
            }
          ],
          component: {
            span: 14
          }
        },
        formatter (row, column, value, index) {
          return value.toFixed(2)
        }
      },
      {
        title: '版本号',
        key: 'version',
        disabled: true,
        form: {
          component: {
            show: false // 是否显示该字段
          },
          addDisabled: true,
          editDisabled: true
        }
      }
    ]
  }
}
